<template>
  <div class="school-manage">
    <div class="title">
      <div class="block"></div>
      <div class="word">学校列表</div>
      <div class="button">
        <el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div>
      <search :formInline="formInline" @getSearchList="getSearchList">
        <div class="search-form">
          <el-form
            :rules="rules"
            ref="formInline"
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item class="el-form-item" label="输入搜索 :" prop="school">
              <el-input
                class="el-input"
                v-model.trim="formInline.school"
                placeholder="学校名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="学费 :">
              <el-input
                class="el-input"
                v-model.trim="formInline.m1"
                placeholder=""
              >
              </el-input>
            </el-form-item>
            <el-form-item> - </el-form-item>
            <el-form-item>
              <el-input
                class="el-input"
                v-model.trim="formInline.m2"
                placeholder=""
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </search>
    </div>
    <div>
      <datashow>
        <template v-slot:form>
          <el-table
            class="el-table"
            ref="multipleTable"
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="schoolId" label="编号"> </el-table-column>
            <el-table-column prop="schoolLogo" label="学校图片">
              <template slot-scope="scope">
                <img class="img" :src="scope.row.schoolLogo" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="schoolCName" label="学校中文名称">
            </el-table-column>
            <el-table-column prop="schoolEName" label="学校英文名称">
            </el-table-column>
            <el-table-column prop="applyTime" label="申请时间">
            </el-table-column>
            <el-table-column prop="tuition" label="学费/年"> </el-table-column>
            <el-table-column prop="proportion" label="国际生比例">
            </el-table-column>
            <el-table-column prop="operation" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="goEdit(scope.row)" size="small"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="deleteSchool(scope.row)"
                  >删除</el-button
                >
                <el-dialog
                  title="提示"
                  :visible.sync="deleteDialogVisible"
                  width="30%"
                  center
                >
                  <div style="text-align:center">
                    <span>是否确实删除编号为{{ schoolId }}的学校</span>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button class="el-button" @click="deleteDialogVisible = false"
                      >取 消</el-button
                    >
                    <el-button class="el-button" type="primary" @click="goDeleteSchool"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>

          <!-- <div class="bottom">
          <el-checkbox @change="toggleSelect(tableData)">全选</el-checkbox>
          <paging class="paging"></paging>
        </div> -->
        </template>
      </datashow>
    </div>
    <div class="paging">
      <paging :total="total" @size="size" @currentpage="currentpage"></paging>
    </div>
    <div>
      <footerinfo></footerinfo>
    </div>
  </div>
</template>

<script>
import search from '../../../component/search/search.vue'
import datashow from '../../../component/datashow/datashow.vue'
import paging from '../../../component/paging/paging.vue'
import footerinfo from '../../../component/footer/footer.vue'
import { getAllSchool, getSchool, deleteSchool } from '../../../api/index'
export default {
  inject: ['reload'],
  name: 'schoolManage',
  components: {
    search, //筛选查询组件
    datashow, //数据列表组件
    paging, //分页组件
    footerinfo, //页脚组件
  },

  data() {
    return {
      current: '',
      pagesize: '',
      total: 0, //一共多少条数据
      deleteDialogVisible: false,
      schoolId: '',
      formInline: {
        school: '', //学校编号或id
        m1: '', //最低学费
        m2: '', //最高学费
      },
      rules: {
        school: [
          { required: true, message: '请输入学校名称', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      tableData: [],
    }
  },

  mounted() {
    this.$emit('routeName', 'schoolList')
    this.getList()
  },

  methods: {
    goEdit(val) {
      this.$router.push({
        name: 'schoolEdit',
        params: {
          schoolId: val.schoolId,
        },
      })
    },
    getList() {
      getAllSchool(this.current, this.pagesize).then((data) => {
        // console.log(data.data);
        this.tableData = data.data.records
        this.total = data.data.total
        console.log(data)
      })
    },
    currentpage(val) {
      // console.log(val);
      this.current = val //得到新的当前页
      this.getList() //获取新的数据列表
    },
    size(val) {
      // console.log(val);
      this.pagesize = val //得到新当前页的一共几行数据
      this.getList() //获取新的数据列表
    },
    getSearchList() {
      if (this.formInline.school) {
        this.current = '' //清空分页当前页数
        this.pagesize = '' //清空分页当前页的条数
        console.log(111)
        console.log(this.formInline.school)
        getSchool(
          this.current,
          this.pagesize,
          this.formInline.school,
          this.formInline.m1,
          this.formInline.m2
        ).then((data) => {
          console.log(data.data)
          this.tableData = data.data.records
          this.total = data.data.total
        })
      }
      if (!(this.formInline.school)) {
        this.getList()
      }
    },
    deleteSchool(val) {
      this.schoolId = val.schoolId
      this.deleteDialogVisible = true
    },
    goDeleteSchool() {
      this.deleteDialogVisible = false
      deleteSchool(this.schoolId).then((data) => {
        console.log(data.data)
        this.getList()
      })
    },
    refresh() {
      this.reload()
    },
  },
}
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}
.search-form {
  padding-top: 10px;
  padding-left: 10px;
}
.img {
  width: 60px;
  height: 50px;
}
.paging {
  margin-top: 20px;
  text-align: center;
}
/* .el-button {
  width: 50px;
} */
</style>
